<template>
    <div class="navBar">
        <!-- 标题 -->
        <div style="display: flex;flex-direction: row;justify-content: center;">
            <img src="/icons/icon.png"style="width: 40px;">
            <span style="font-size: 24px;">校务管理</span>
        </div>
        <!-- 总览 -->
        <div>
            <button class="nav_bar_btn" data-value="total_vision">
                <img src="/public/icons/total_off.png" alt="">
                <span>总览</span>
            </button>
        </div>
        <!-- 信息管理 -->
        <div>
            <button class="nav_bar_btn" data-value="imformation">
                <img src="/public/icons/information_off.png" alt="">
                <span>信息管理</span>
            </button>
        </div>
        <!-- 组织管理 -->
        <div>
            <button class="nav_bar_btn" data-value="orgnization">
                <img src="/public/icons/orgnization_off.png" alt="">
                <span>组织管理</span>
            </button>
        </div>
        <div class="org_fade" id="orgnization">
            <button class="nav_bar_btn" data-value="administration">
                <li>行政组织</li>
            </button>
            <button class="nav_bar_btn" data-value="teaching">
                <li>教学组织</li>
            </button>
        </div>
        <!-- 班级管理 -->
        <div>
            <button class="nav_bar_btn" data-value="class">
                <img src="/public/icons/class_off.png" alt="">
                <span>班级管理</span>
            </button>
        </div>
        <!-- 人员管理 -->
        <div>
            <button class="nav_bar_btn" data-value="person">
                <img src="/public/icons/person_off.png" alt="">
                <span>人员管理</span>
            </button>
        </div>
        <div class="org_fade" id="person">
            <button class="nav_bar_btn" data-value="student">
                <li>学生管理</li>
            </button>
            <button class="nav_bar_btn" data-value="teacher">
                <li>老师管理</li>
            </button>
            <button class="nav_bar_btn" data-value="parent">
                <li>家长管理</li>
            </button>
        </div>
        <!-- 学期管理 -->
        <div>
            <button class="nav_bar_btn" data-value="term">
                <img src="/public/icons/term_off.png" alt="">
                <span>学期管理</span>
            </button>
        </div>
        <div class="org_fade" id="term">
        </div>
        <!-- 教室管理 -->
        <div>
            <button class="nav_bar_btn" data-value="room">
                <img src="/public/icons/room_off.png" alt="">
                <span>教室管理</span>
            </button>
        </div>
        <!-- 资源管理 -->
        <div>
            <button class="nav_bar_btn" data-value="resource">
                <img src="/public/icons/resource_off.png" alt="">
                <span>资源管理</span>
            </button>
        </div>
    </div>
</template>
<script>
 // 获取子窗口
 const view = document.querySelector(".view");
        // 添加鼠标移入事件
        document.addEventListener("mouseover",(event)=>{
            const target = event.target;
            // 鼠标移入导航栏元素
            if(target.classList.contains("nav_bar_btn")){
                // 隐藏元素
                // 人员管理
                if(target.dataset.value==="person"){
                    const person = document.getElementById("person");
                    person.style.display = "flex";
                    person.onmouseleave = function(){
                        person.style.display = "none";
                    }
                }
                // 组织管理
                else if(target.dataset.value==="orgnization"){
                    const orgnization = document.getElementById("orgnization");
                    orgnization.style.display = "flex";
                    orgnization.onmouseleave = function(){
                        orgnization.style.display = "none";
                    }
                }
                // 学期管理
                else if(target.dataset.value==="term"){
                    const term = document.getElementById("term");
                    term.style.display = "flex";
                    term.onmouseleave = function(){
                        term.style.display = "none";
                    }
                }
                target.style.backgroundColor = "#f0f5f5";
                target.onmouseleave = function(){
                    target.style.backgroundColor = "#fff";
                }
                target.onclick = function(){
                    // target.style.backgroundColor = "#3144e2"
                    console.log(target.dataset.value);
                    switch(target.dataset.value){
                        case "total_vision":
                            view.innerHTML=`
                            <iframe src="html/TotalView.html" height="100%"width="100%" ></iframe>
                            `
                            break;
                        case "imformation":
                            view.innerHTML=`
                            <iframe src="html/Imformation.html" height="100%"width="100%"></iframe>
                            `
                            break;
                        case "orgnization":
                            view.innerHTML=`
                            <iframe src="html/Orgnization.html" height="100%"width="100%"></iframe>
                            `
                            break;
                        case "class":
                            view.innerHTML=`
                            <iframe src="html/Class.html" height="100%"width="100%"></iframe>
                            `
                            break;
                        case "person":
                            view.innerHTML=`
                            <iframe src="html/Person.html" height="100%"width="100%"></iframe>
                            `
                            break;
                        case "term":
                            view.innerHTML=`
                            <iframe src="html/Term.html" height="100%"width="100%"></iframe>
                            `
                            break;
                        case "room":
                            view.innerHTML=`
                            <iframe src="html/Room.html" height="100%"width="100%"></iframe>
                            `
                            break;
                        case "resource":
                            view.innerHTML=`
                            <iframe src="html/Resource.html" height="100%"width="100%"></iframe>
                            `
                            break;
                        case "student":
                            view.innerHTML=`
                            <iframe src="html/Students.html" height="100%"width="100%"></iframe>
                            `
                            break;
                        case "teacher":
                            view.innerHTML=`
                            <iframe src="html/Teachers.html" height="100%"width="100%"></iframe>
                            `
                            break;
                        case "parent":
                            view.innerHTML=`
                            <iframe src="html/Parents.html" height="100%"width="100%"></iframe>
                            `
                            break;
                        case "administration":
                            view.innerHTML=`
                            <iframe src="html/Administration.html" height="100%"width="100%"></iframe>
                            `
                            break;
                        case "teaching":
                            view.innerHTML=`
                            <iframe src="html/Teaching.html" height="100%"width="100%"></iframe>
                            `
                            break;
                    }
                }
            }
        })
    </script></script>
<script setup lang="ts">
import { ref } from 'vue';

</script>